



<!doctype html>
<html lang="en" class="no-js">
  <head>
    
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      <meta http-equiv="x-ua-compatible" content="ie=edge">
      
      
        <link rel="canonical" href="https://rexrainbow.github.io/phaser3-rex-notes/standalone-docs/site/index.html/firebase-singleroom/">
      
      
        <meta name="author" content="rexrainbow">
      
      
        <meta name="lang:clipboard.copy" content="Copy to clipboard">
      
        <meta name="lang:clipboard.copied" content="Copied to clipboard">
      
        <meta name="lang:search.language" content="en">
      
        <meta name="lang:search.pipeline.stopwords" content="True">
      
        <meta name="lang:search.pipeline.trimmer" content="True">
      
        <meta name="lang:search.result.none" content="No matching documents">
      
        <meta name="lang:search.result.one" content="1 matching document">
      
        <meta name="lang:search.result.other" content="# matching documents">
      
        <meta name="lang:search.tokenizer" content="[\s\-]+">
      
      <link rel="shortcut icon" href="../images/logo.svg">
      <meta name="generator" content="mkdocs-1.0.4, mkdocs-material-4.4.2">
    
    
      
        <title>Single room - Rex plugins</title>
      
    
    
      <link rel="stylesheet" href="../assets/stylesheets/application.30686662.css">
      
        <link rel="stylesheet" href="../assets/stylesheets/application-palette.a8b3c06d.css">
      
      
        
        
        <meta name="theme-color" content="#2196f3">
      
    
    
      <script src="../assets/javascripts/modernizr.74668098.js"></script>
    
    
      
        <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700|Roboto+Mono&display=fallback">
        <style>body,input{font-family:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif}code,kbd,pre{font-family:"Roboto Mono","Courier New",Courier,monospace}</style>
      
    
    <link rel="stylesheet" href="../assets/fonts/material-icons.css">
    
    
    
      
        
<script>
  window.ga = window.ga || function() {
    (ga.q = ga.q || []).push(arguments)
  }
  ga.l = +new Date
  /* Setup integration and send page view */
  ga("create", "UA-119804412-1", "auto")
  ga("set", "anonymizeIp", true)
  ga("send", "pageview")
  /* Register handler to log search on blur */
  document.addEventListener("DOMContentLoaded", () => {
    if (document.forms.search) {
      var query = document.forms.search.query
      query.addEventListener("blur", function() {
        if (this.value) {
          var path = document.location.pathname;
          ga("send", "pageview", path + "?q=" + this.value)
        }
      })
    }
  })
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
      
    
    
  </head>
  
    
    
    <body dir="ltr" data-md-color-primary="blue" data-md-color-accent="blue">
  
    <svg class="md-svg">
      <defs>
        
        
      </defs>
    </svg>
    <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
    <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
    <label class="md-overlay" data-md-component="overlay" for="__drawer"></label>
    
      <a href="#introduction" tabindex="1" class="md-skip">
        Skip to content
      </a>
    
    
      <header class="md-header" data-md-component="header">
  <nav class="md-header-nav md-grid">
    <div class="md-flex">
      <div class="md-flex__cell md-flex__cell--shrink">
        <a href="https://rexrainbow.github.io/phaser3-rex-notes/standalone-docs/site/index.html" title="Rex plugins" class="md-header-nav__button md-logo">
          
            <i class="md-icon">memory</i>
          
        </a>
      </div>
      <div class="md-flex__cell md-flex__cell--shrink">
        <label class="md-icon md-icon--menu md-header-nav__button" for="__drawer"></label>
      </div>
      <div class="md-flex__cell md-flex__cell--stretch">
        <div class="md-flex__ellipsis md-header-nav__title" data-md-component="title">
          
            <span class="md-header-nav__topic">
              Rex plugins
            </span>
            <span class="md-header-nav__topic">
              
                Single room
              
            </span>
          
        </div>
      </div>
      <div class="md-flex__cell md-flex__cell--shrink">
        
          <label class="md-icon md-icon--search md-header-nav__button" for="__search"></label>
          
<div class="md-search" data-md-component="search" role="dialog">
  <label class="md-search__overlay" for="__search"></label>
  <div class="md-search__inner" role="search">
    <form class="md-search__form" name="search">
      <input type="text" class="md-search__input" name="query" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="query" data-md-state="active">
      <label class="md-icon md-search__icon" for="__search"></label>
      <button type="reset" class="md-icon md-search__icon" data-md-component="reset" tabindex="-1">
        &#xE5CD;
      </button>
    </form>
    <div class="md-search__output">
      <div class="md-search__scrollwrap" data-md-scrollfix>
        <div class="md-search-result" data-md-component="result">
          <div class="md-search-result__meta">
            Type to start searching
          </div>
          <ol class="md-search-result__list"></ol>
        </div>
      </div>
    </div>
  </div>
</div>
        
      </div>
      
    </div>
  </nav>
</header>
    
    <div class="md-container">
      
        
      
      
      <main class="md-main" role="main">
        <div class="md-main__inner md-grid" data-md-component="container">
          
            
              <div class="md-sidebar md-sidebar--primary" data-md-component="navigation">
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    <nav class="md-nav md-nav--primary" data-md-level="0">
  <label class="md-nav__title md-nav__title--site" for="__drawer">
    <a href="https://rexrainbow.github.io/phaser3-rex-notes/standalone-docs/site/index.html" title="Rex plugins" class="md-nav__button md-logo">
      
        <i class="md-icon">memory</i>
      
    </a>
    Rex plugins
  </label>
  
  <ul class="md-nav__list" data-md-scrollfix>
    
      
      
      


  <li class="md-nav__item">
    <a href=".." title="Home" class="md-nav__link">
      Home
    </a>
  </li>

    
      
      
      

  


  <li class="md-nav__item md-nav__item--active md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-2" type="checkbox" id="nav-2" checked>
    
    <label class="md-nav__link" for="nav-2">
      Firebase applications
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="1">
      <label class="md-nav__title" for="nav-2">
        Firebase applications
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../firebase-overview/" title="Overview" class="md-nav__link">
      Overview
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../firebase-leaderboard/" title="Leaderboard" class="md-nav__link">
      Leaderboard
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../firebase-files/" title="Files" class="md-nav__link">
      Files
    </a>
  </li>

        
          
          
          

  


  <li class="md-nav__item md-nav__item--active">
    
    <input class="md-toggle md-nav__toggle" data-md-toggle="toc" type="checkbox" id="__toc">
    
    
      <label class="md-nav__link md-nav__link--active" for="__toc">
        Single room
      </label>
    
    <a href="./" title="Single room" class="md-nav__link md-nav__link--active">
      Single room
    </a>
    
      
<nav class="md-nav md-nav--secondary">
  
  
  
    <label class="md-nav__title" for="__toc">Table of contents</label>
    <ul class="md-nav__list" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#introduction" class="md-nav__link">
    Introduction
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#usage" class="md-nav__link">
    Usage
  </a>
  
    <nav class="md-nav">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#install-plugin" class="md-nav__link">
    Install plugin
  </a>
  
    <nav class="md-nav">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#load-minify-file" class="md-nav__link">
    Load minify file
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#import-plugin" class="md-nav__link">
    Import plugin
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#import-class" class="md-nav__link">
    Import class
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
        
          <li class="md-nav__item">
  <a href="#create-instance" class="md-nav__link">
    Create instance
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#join-room" class="md-nav__link">
    Join room
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#leave-room" class="md-nav__link">
    Leave room
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#kick-user" class="md-nav__link">
    Kick user
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#user-list" class="md-nav__link">
    User list
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#send-message" class="md-nav__link">
    Send message
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#receive-messages" class="md-nav__link">
    Receive messages
  </a>
  
    <nav class="md-nav">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#received-messages" class="md-nav__link">
    Received messages
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
        
          <li class="md-nav__item">
  <a href="#change-user-name" class="md-nav__link">
    Change user name
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#tables" class="md-nav__link">
    Tables
  </a>
  
    <nav class="md-nav">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#write" class="md-nav__link">
    Write
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#read" class="md-nav__link">
    Read
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
        
          <li class="md-nav__item">
  <a href="#events" class="md-nav__link">
    Events
  </a>
  
    <nav class="md-nav">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#user-list-events" class="md-nav__link">
    User list events
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#broadcast-events" class="md-nav__link">
    Broadcast events
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#table-events" class="md-nav__link">
    Table events
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
      
      
      
      
    </ul>
  
</nav>
    
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../firebase-onlineuserlist/" title="Online user list" class="md-nav__link">
      Online user list
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../firebase-broadcast/" title="Broadcast" class="md-nav__link">
      Broadcast
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../firebase-itemtable/" title="Item table" class="md-nav__link">
      Item table
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../firebase-idalias/" title="ID-alias" class="md-nav__link">
      ID-alias
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

    
  </ul>
</nav>
                  </div>
                </div>
              </div>
            
            
              <div class="md-sidebar md-sidebar--secondary" data-md-component="toc">
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    
<nav class="md-nav md-nav--secondary">
  
  
  
    <label class="md-nav__title" for="__toc">Table of contents</label>
    <ul class="md-nav__list" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#introduction" class="md-nav__link">
    Introduction
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#usage" class="md-nav__link">
    Usage
  </a>
  
    <nav class="md-nav">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#install-plugin" class="md-nav__link">
    Install plugin
  </a>
  
    <nav class="md-nav">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#load-minify-file" class="md-nav__link">
    Load minify file
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#import-plugin" class="md-nav__link">
    Import plugin
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#import-class" class="md-nav__link">
    Import class
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
        
          <li class="md-nav__item">
  <a href="#create-instance" class="md-nav__link">
    Create instance
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#join-room" class="md-nav__link">
    Join room
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#leave-room" class="md-nav__link">
    Leave room
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#kick-user" class="md-nav__link">
    Kick user
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#user-list" class="md-nav__link">
    User list
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#send-message" class="md-nav__link">
    Send message
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#receive-messages" class="md-nav__link">
    Receive messages
  </a>
  
    <nav class="md-nav">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#received-messages" class="md-nav__link">
    Received messages
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
        
          <li class="md-nav__item">
  <a href="#change-user-name" class="md-nav__link">
    Change user name
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#tables" class="md-nav__link">
    Tables
  </a>
  
    <nav class="md-nav">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#write" class="md-nav__link">
    Write
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#read" class="md-nav__link">
    Read
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
        
          <li class="md-nav__item">
  <a href="#events" class="md-nav__link">
    Events
  </a>
  
    <nav class="md-nav">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#user-list-events" class="md-nav__link">
    User list events
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#broadcast-events" class="md-nav__link">
    Broadcast events
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#table-events" class="md-nav__link">
    Table events
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
      
      
      
      
    </ul>
  
</nav>
                  </div>
                </div>
              </div>
            
          
          <div class="md-content">
            <article class="md-content__inner md-typeset">
              
                
                
                  <h1>Single room</h1>
                
                <h2 id="introduction">Introduction<a class="headerlink" href="#introduction" title="Permanent link">&para;</a></h2>
<p>Chat room, using <a href="https://firebase.google.com/docs/database/">firebase-database</a>.</p>
<ul>
<li>Author: Rex</li>
</ul>
<h2 id="usage">Usage<a class="headerlink" href="#usage" title="Permanent link">&para;</a></h2>
<p><a href="https://github.com/rexrainbow/phaser3-rex-notes/blob/master/examples/firebase-singleroom">Sample code</a></p>
<h3 id="install-plugin">Install plugin<a class="headerlink" href="#install-plugin" title="Permanent link">&para;</a></h3>
<h4 id="load-minify-file">Load minify file<a class="headerlink" href="#load-minify-file" title="Permanent link">&para;</a></h4>
<ul>
<li><a href="https://firebase.google.com/docs/web/setup">Add Firebase SDKs</a>, and <a href="https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexfirebase.min.js">rex-firebase minify javascript file</a>
    <div class="codehilite"><pre><span></span><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
    <span class="c">&lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;</span>
    <span class="c">&lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;/__/firebase/7.7.0/firebase-app.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="c">&lt;!-- Add Firebase products that you want to use --&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;/__/firebase/7.7.0/firebase-database.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>

    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexfirebase.min.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>    
</pre></div></li>
<li>Initialize firebase application.
    <div class="codehilite"><pre><span></span><span class="nx">firebase</span><span class="p">.</span><span class="nx">initializeApp</span><span class="p">({</span>
   <span class="nx">apiKey</span><span class="o">:</span> <span class="s1">&#39;...&#39;</span><span class="p">,</span>
   <span class="nx">authDomain</span><span class="o">:</span> <span class="s1">&#39;...&#39;</span><span class="p">,</span>
   <span class="nx">databaseURL</span><span class="o">:</span> <span class="s1">&#39;...&#39;</span><span class="p">,</span>
   <span class="nx">projectId</span><span class="o">:</span> <span class="s1">&#39;...&#39;</span><span class="p">,</span>
   <span class="nx">storageBucket</span><span class="o">:</span> <span class="s1">&#39;...&#39;</span><span class="p">,</span>
   <span class="nx">messagingSenderId</span><span class="o">:</span> <span class="s1">&#39;...&#39;</span>
<span class="p">})</span>
</pre></div></li>
<li>Get firebase plugin
    <div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">rexFire</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">window</span><span class="p">.</span><span class="nx">rexfirebase</span><span class="p">();</span>
</pre></div></li>
<li>Add single-room object
    <div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">room</span> <span class="o">=</span> <span class="nx">rexFire</span><span class="p">.</span><span class="nx">add</span><span class="p">.</span><span class="nx">singleRoom</span><span class="p">(</span><span class="nx">config</span><span class="p">);</span>
</pre></div></li>
</ul>
<h4 id="import-plugin">Import plugin<a class="headerlink" href="#import-plugin" title="Permanent link">&para;</a></h4>
<ul>
<li>Install rex plugins from npm
    <div class="codehilite"><pre><span></span>npm i phaser3-rex-plugins
</pre></div></li>
<li><a href="https://firebase.google.com/docs/web/setup">Add Firebase SDKs</a>
    <div class="codehilite"><pre><span></span><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
    <span class="c">&lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;</span>
    <span class="c">&lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;/__/firebase/7.7.0/firebase-app.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="c">&lt;!-- Add Firebase products that you want to use --&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;/__/firebase/7.7.0/firebase-database.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>    
</pre></div></li>
<li>Initialize firebase application.
    <div class="codehilite"><pre><span></span><span class="nx">firebase</span><span class="p">.</span><span class="nx">initializeApp</span><span class="p">({</span>
   <span class="nx">apiKey</span><span class="o">:</span> <span class="s1">&#39;...&#39;</span><span class="p">,</span>
   <span class="nx">authDomain</span><span class="o">:</span> <span class="s1">&#39;...&#39;</span><span class="p">,</span>
   <span class="nx">databaseURL</span><span class="o">:</span> <span class="s1">&#39;...&#39;</span><span class="p">,</span>
   <span class="nx">projectId</span><span class="o">:</span> <span class="s1">&#39;...&#39;</span><span class="p">,</span>
   <span class="nx">storageBucket</span><span class="o">:</span> <span class="s1">&#39;...&#39;</span><span class="p">,</span>
   <span class="nx">messagingSenderId</span><span class="o">:</span> <span class="s1">&#39;...&#39;</span>
<span class="p">})</span>
</pre></div></li>
<li>Get firebase plugin
    <div class="codehilite"><pre><span></span><span class="kr">import</span> <span class="nx">RexFirebase</span> <span class="nx">from</span> <span class="s1">&#39;phaser3-rex-plugins/plugins/firebase.js&#39;</span><span class="p">;</span>    
<span class="kd">var</span> <span class="nx">rexFire</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">RexFirebase</span><span class="p">();</span>
</pre></div></li>
<li>Add single-room object
    <div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">room</span> <span class="o">=</span> <span class="nx">rexFire</span><span class="p">.</span><span class="nx">add</span><span class="p">.</span><span class="nx">singleRoom</span><span class="p">(</span><span class="nx">config</span><span class="p">);</span>
</pre></div></li>
</ul>
<h4 id="import-class">Import class<a class="headerlink" href="#import-class" title="Permanent link">&para;</a></h4>
<ul>
<li>Install rex plugins from npm
    <div class="codehilite"><pre><span></span>npm i phaser3-rex-plugins
</pre></div></li>
<li><a href="https://firebase.google.com/docs/web/setup">Add Firebase SDKs</a>
    <div class="codehilite"><pre><span></span><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
    <span class="c">&lt;!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --&gt;</span>
    <span class="c">&lt;!-- Firebase App (the core Firebase SDK) is always required and must be listed first --&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;/__/firebase/7.7.0/firebase-app.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="c">&lt;!-- Add Firebase products that you want to use --&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;/__/firebase/7.7.0/firebase-database.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>    
</pre></div></li>
<li>Initialize firebase application.
    <div class="codehilite"><pre><span></span><span class="nx">firebase</span><span class="p">.</span><span class="nx">initializeApp</span><span class="p">({</span>
   <span class="nx">apiKey</span><span class="o">:</span> <span class="s1">&#39;...&#39;</span><span class="p">,</span>
   <span class="nx">authDomain</span><span class="o">:</span> <span class="s1">&#39;...&#39;</span><span class="p">,</span>
   <span class="nx">databaseURL</span><span class="o">:</span> <span class="s1">&#39;...&#39;</span><span class="p">,</span>
   <span class="nx">projectId</span><span class="o">:</span> <span class="s1">&#39;...&#39;</span><span class="p">,</span>
   <span class="nx">storageBucket</span><span class="o">:</span> <span class="s1">&#39;...&#39;</span><span class="p">,</span>
   <span class="nx">messagingSenderId</span><span class="o">:</span> <span class="s1">&#39;...&#39;</span>
<span class="p">})</span>
</pre></div></li>
<li>Import class
    <div class="codehilite"><pre><span></span><span class="kr">import</span> <span class="p">{</span> <span class="nx">SingleRoom</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;phaser3-rex-plugins/plugins/firebase-components.js&#39;</span><span class="p">;</span>
</pre></div></li>
<li>Add single-room object
    <div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">room</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SingleRoom</span><span class="p">(</span><span class="nx">config</span><span class="p">);</span>
</pre></div></li>
</ul>
<h3 id="create-instance">Create instance<a class="headerlink" href="#create-instance" title="Permanent link">&para;</a></h3>
<div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">room</span> <span class="o">=</span> <span class="nx">rexFire</span><span class="p">.</span><span class="nx">add</span><span class="p">.</span><span class="nx">singleRoom</span><span class="p">({</span>
    <span class="nx">root</span><span class="o">:</span> <span class="s1">&#39;&#39;</span><span class="p">,</span>
    <span class="c1">// broadcast: true,</span>
    <span class="c1">// tables: undefined</span>
<span class="p">});</span>
</pre></div>

<ul>
<li><code>root</code> : Path of this room.</li>
<li><code>receiverID</code> : ID of receiver/channel.</li>
<li><code>broadcast</code> : <a href="../firebase-broadcast/">Broadcast</a> chat messages.<ul>
<li><code>true</code> : Enable broadcasting, without storing received (history) messages. Default behavior.</li>
<li><code>false</code> : Disable broadcasting.</li>
<li>A JSON object :
    <div class="codehilite"><pre><span></span><span class="p">{</span>
    <span class="nx">history</span><span class="o">:</span> <span class="mi">0</span>
<span class="p">}</span>
</pre></div><ul>
<li><code>history</code> : Stored received (history) messages in client side.<ul>
<li><code>0</code>, or <code>false</code> : No history message stored.</li>
<li><code>-1</code>, or <code>true</code> : Infinity history message stored. i.e. store all messages from starting updating.</li>
<li>A number larger then <code>0</code> : Length of stored history message.</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><code>tables</code> : Configuration of <a href="../firebase-itemtable/">tables</a>.<ul>
<li><code>undefined</code> : No table.</li>
<li>Array of table-config JSON object for each table.
    <div class="codehilite"><pre><span></span><span class="p">[</span>
    <span class="p">{</span>
        <span class="nx">key</span><span class="o">:</span> <span class="nx">tableKey</span><span class="p">,</span>
        <span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;1d&#39;</span>
    <span class="p">},</span>
    <span class="p">{</span>
        <span class="p">...</span>
    <span class="p">}</span>
<span class="p">]</span>
</pre></div><ul>
<li><code>key</code> : Unique name of this table.</li>
<li><code>type</code> : Table type.<ul>
<li><code>1</code>, or <code>'1d'</code> : 1d table, indexing by (key0)</li>
<li><code>2</code>, or <code>'2d'</code> : 2d table, indexing by (key0, key1)</li>
<li><code>3</code>, or <code>'3d'</code> : 3d table, indexing by (key0, key1, key2)</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<h3 id="join-room">Join room<a class="headerlink" href="#join-room" title="Permanent link">&para;</a></h3>
<ol>
<li>Set userID and user name.
    <div class="codehilite"><pre><span></span><span class="nx">room</span><span class="p">.</span><span class="nx">setUser</span><span class="p">(</span><span class="nx">userID</span><span class="p">,</span> <span class="nx">userName</span><span class="p">);</span>
</pre></div><ul>
<li><code>userID</code> : User ID.</li>
<li><code>userName</code> : Display name.</li>
</ul>
</li>
<li>Join room.
    <div class="codehilite"><pre><span></span><span class="nx">room</span><span class="p">.</span><span class="nx">joinRoom</span><span class="p">();</span>
</pre></div></li>
</ol>
<h3 id="leave-room">Leave room<a class="headerlink" href="#leave-room" title="Permanent link">&para;</a></h3>
<div class="codehilite"><pre><span></span><span class="nx">room</span><span class="p">.</span><span class="nx">leaveRoom</span><span class="p">();</span>
</pre></div>

<h3 id="kick-user">Kick user<a class="headerlink" href="#kick-user" title="Permanent link">&para;</a></h3>
<div class="codehilite"><pre><span></span><span class="nx">room</span><span class="p">.</span><span class="nx">kickUser</span><span class="p">(</span><span class="nx">userID</span><span class="p">);</span>
</pre></div>

<h3 id="user-list">User list<a class="headerlink" href="#user-list" title="Permanent link">&para;</a></h3>
<ul>
<li>Get users in room(user list)
    <div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">users</span> <span class="o">=</span> <span class="nx">room</span><span class="p">.</span><span class="nx">getUsers</span><span class="p">();</span>
</pre></div><ul>
<li><code>users</code> : Array of user <code>{userID, userName}</code></li>
</ul>
</li>
<li>Is first user in room(user list)?
    <div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">isFirstUser</span> <span class="o">=</span> <span class="nx">room</span><span class="p">.</span><span class="nx">isFirstUser</span><span class="p">(</span><span class="nx">userID</span><span class="p">);</span>
<span class="c1">// var isFirstUser = room.isFirstUser();  // Current user is first user</span>
</pre></div></li>
<li>Room(user list) is full
    <div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">isFull</span> <span class="o">=</span> <span class="nx">room</span><span class="p">.</span><span class="nx">isFull</span><span class="p">();</span>
</pre></div></li>
<li>Maximun users setting value
    <div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">maxUsers</span> <span class="o">=</span> <span class="nx">room</span><span class="p">.</span><span class="nx">maxUsers</span><span class="p">;</span>
</pre></div></li>
<li>Current user is in room(user list)
    <div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">isInRoom</span> <span class="o">=</span> <span class="nx">room</span><span class="p">.</span><span class="nx">isInRoom</span><span class="p">();</span>
</pre></div></li>
</ul>
<h3 id="send-message">Send message<a class="headerlink" href="#send-message" title="Permanent link">&para;</a></h3>
<div class="codehilite"><pre><span></span><span class="nx">room</span><span class="p">.</span><span class="nx">broadcast</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="nx">message</span><span class="p">);</span>
</pre></div>

<ul>
<li><code>message</code> : A string message, or a JSON data.</li>
</ul>
<h3 id="receive-messages">Receive messages<a class="headerlink" href="#receive-messages" title="Permanent link">&para;</a></h3>
<ol>
<li>Register receive event
    <div class="codehilite"><pre><span></span><span class="nx">room</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;broadcast.receive&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">){</span>
    <span class="c1">// var senderID = data.senderID;</span>
    <span class="c1">// var senderName = data.senderName;</span>
    <span class="c1">// var message = data.message;</span>
<span class="p">})</span>
</pre></div></li>
</ol>
<p>Only receive messages after joined room. Previous messages won't be got anymore.</p>
<h4 id="received-messages">Received messages<a class="headerlink" href="#received-messages" title="Permanent link">&para;</a></h4>
<p>Received messages will be saved in client side.</p>
<ul>
<li>Get received (history) messages.
    <div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">messages</span> <span class="o">=</span> <span class="nx">room</span><span class="p">.</span><span class="nx">broadcast</span><span class="p">.</span><span class="nx">getHistory</span><span class="p">();</span>
</pre></div></li>
<li>Clear history messages.
    <div class="codehilite"><pre><span></span><span class="nx">room</span><span class="p">.</span><span class="nx">broadcast</span><span class="p">.</span><span class="nx">clearHistory</span><span class="p">();</span>
</pre></div></li>
</ul>
<h3 id="change-user-name">Change user name<a class="headerlink" href="#change-user-name" title="Permanent link">&para;</a></h3>
<div class="codehilite"><pre><span></span><span class="nx">room</span><span class="p">.</span><span class="nx">changeUserName</span><span class="p">(</span><span class="nx">newUserName</span><span class="p">);</span>
</pre></div>

<h3 id="tables">Tables<a class="headerlink" href="#tables" title="Permanent link">&para;</a></h3>
<ul>
<li>Get table
    <div class="codehilite"><pre><span></span><span class="kd">var</span> <span class="nx">table</span> <span class="o">=</span> <span class="nx">room</span><span class="p">.</span><span class="nx">getTable</span><span class="p">(</span><span class="nx">key</span><span class="p">);</span>
</pre></div><ul>
<li><code>key</code> : Unique name of this table.</li>
</ul>
</li>
</ul>
<h4 id="write">Write<a class="headerlink" href="#write" title="Permanent link">&para;</a></h4>
<p>See <a href="../firebase-itemtable/#write">here</a></p>
<h4 id="read">Read<a class="headerlink" href="#read" title="Permanent link">&para;</a></h4>
<p>See <a href="../firebase-itemtable/#read">here</a></p>
<h3 id="events">Events<a class="headerlink" href="#events" title="Permanent link">&para;</a></h3>
<h4 id="user-list-events">User list events<a class="headerlink" href="#user-list-events" title="Permanent link">&para;</a></h4>
<ul>
<li>Any user join
    <div class="codehilite"><pre><span></span><span class="nx">room</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;userlist.join&#39;</span><span class="p">,</span> <span class="nx">user</span><span class="p">);</span>
</pre></div><ul>
<li><code>user</code> : <code>{userID, userName}</code></li>
</ul>
</li>
<li>Any user leave
    <div class="codehilite"><pre><span></span><span class="nx">room</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;userlist.leave&#39;</span><span class="p">,</span> <span class="nx">user</span><span class="p">);</span>
</pre></div><ul>
<li><code>user</code> : <code>{userID, userName}</code></li>
</ul>
</li>
<li>User list updated, includes user join, user leave, and user name changed
    <div class="codehilite"><pre><span></span><span class="nx">room</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;userlist.update&#39;</span><span class="p">,</span> <span class="nx">users</span><span class="p">);</span>
</pre></div><ul>
<li><code>users</code> : Array of user <code>{userID, userName}</code></li>
</ul>
</li>
<li>User name is changed
    <div class="codehilite"><pre><span></span><span class="nx">room</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;userlist.changename&#39;</span><span class="p">,</span> <span class="nx">userID</span><span class="p">,</span> <span class="nx">userName</span><span class="p">,</span> <span class="nx">prevUserName</span><span class="p">);</span>
</pre></div></li>
</ul>
<h4 id="broadcast-events">Broadcast events<a class="headerlink" href="#broadcast-events" title="Permanent link">&para;</a></h4>
<ul>
<li>Receive message
    <div class="codehilite"><pre><span></span><span class="nx">room</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;broadcast.receive&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">){</span>
    <span class="c1">// var senderID = data.senderID;</span>
    <span class="c1">// var senderName = data.senderName;</span>
    <span class="c1">// var message = data.message;</span>
<span class="p">})</span>
</pre></div></li>
</ul>
<h4 id="table-events">Table events<a class="headerlink" href="#table-events" title="Permanent link">&para;</a></h4>
<p><a href="../firebase-itemtable/#events">Event</a> names of each table indexed by key</p>
<ul>
<li><code>init</code> : <code>tables.${key}.init</code></li>
<li><code>update</code> : <code>tables.${key}.update</code></li>
<li><code>addkey0</code> : <code>tables.${key}.addkey0</code></li>
<li><code>removekey0</code> : <code>tables.${key}.removekey0</code></li>
<li><code>changekey0</code> : <code>tables.${key}.changekey0</code></li>
<li><code>addkey1</code> : <code>tables.${key}.addkey1</code></li>
<li><code>removekey1</code> : <code>tables.${key}.removekey1</code></li>
<li><code>changekey1</code> : <code>tables.${key}.changekey1</code></li>
<li><code>addkey2</code> : <code>tables.${key}.addkey2</code></li>
<li><code>removekey2</code> : <code>tables.${key}.removekey2</code></li>
<li><code>changekey2</code> : <code>tables.${key}.changekey2</code></li>
</ul>
                
                  
                
              
              
                


              
            </article>
          </div>
        </div>
      </main>
      
        
<footer class="md-footer">
  
    <div class="md-footer-nav">
      <nav class="md-footer-nav__inner md-grid">
        
          <a href="../firebase-files/" title="Files" class="md-flex md-footer-nav__link md-footer-nav__link--prev" rel="prev">
            <div class="md-flex__cell md-flex__cell--shrink">
              <i class="md-icon md-icon--arrow-back md-footer-nav__button"></i>
            </div>
            <div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title">
              <span class="md-flex__ellipsis">
                <span class="md-footer-nav__direction">
                  Previous
                </span>
                Files
              </span>
            </div>
          </a>
        
        
          <a href="../firebase-onlineuserlist/" title="Online user list" class="md-flex md-footer-nav__link md-footer-nav__link--next" rel="next">
            <div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title">
              <span class="md-flex__ellipsis">
                <span class="md-footer-nav__direction">
                  Next
                </span>
                Online user list
              </span>
            </div>
            <div class="md-flex__cell md-flex__cell--shrink">
              <i class="md-icon md-icon--arrow-forward md-footer-nav__button"></i>
            </div>
          </a>
        
      </nav>
    </div>
  
  <div class="md-footer-meta md-typeset">
    <div class="md-footer-meta__inner md-grid">
      <div class="md-footer-copyright">
        
        powered by
        <a href="https://www.mkdocs.org">MkDocs</a>
        and
        <a href="https://squidfunk.github.io/mkdocs-material/">
          Material for MkDocs</a>
      </div>
      
  <div class="md-footer-social">
    <link rel="stylesheet" href="../assets/fonts/font-awesome.css">
    
      <a href="https://twitter.com/rexrainbow" class="md-footer-social__link fa fa-twitter"></a>
    
      <a href="https://github.com/rexrainbow/" class="md-footer-social__link fa fa-github"></a>
    
  </div>

    </div>
  </div>
</footer>
      
    </div>
    
      <script src="../assets/javascripts/application.c648116f.js"></script>
      
      <script>app.initialize({version:"1.0.4",url:{base:".."}})</script>
      
        <script src="../js/mermaid/mermaid.min.js"></script>
      
        <script src="../js/umlconvert.js"></script>
      
    
  </body>
</html>